<template>
	<view class="nav"
		:style="containerStyle">
		<view v-if="isHome"
			class="head-nav">
			<view class="head-nav_left">
				<text class="iconfont icon-fenleiA"></text>
				<text class="city">中部地区</text>
				<text class="iconfont icon-arrow"></text>
			</view>
			<view class="head-search"
				:style="{marginRight:(menuInfo.width*2 + 40) + 'rpx'}">
				<navigator url="/pages/search/search">
					<text class="iconfont icon-a-searchbar-search"></text>
					<text class="nav-text">找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else
			class="nav-left"
			:style="{textStyle,iconStyle}">
			<image v-if="pages.length"
				@click="handleBack"
				src="../../static/images/back_light.png"
				mode="scaleToFill"></image>
			<image v-else
				src="../../static/images/tb_home.png"
				mode="scaleToFill"></image>
		</view>
		<view class="nav-title"
			v-if="titleText">
			<view class="">
				{{titleText}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onBeforeMount
	} from 'vue';

	const props = defineProps({
		background: {
			type: String,
			default: 'rgba(255, 255, 255, 1)'
		},
		color: {
			type: String,
			default: '#333'
		},
		fontSize: {
			type: Number,
			default: 32
		},
		iconWidth: {
			type: Number,
			default: 118,
		},
		iconHeight: {
			type: Number,
			default: 38
		},
		titleText: {
			type: String,
			default: ""
		},
		isHome: {
			type: Boolean,
			default: true
		}
	})

	const sysInfo = ref({})
	const menuInfo = ref({})
	const containerStyle = ref({})
	const textStyle = ref({})
	const iconStyle = ref({})
	const pages = ref(getCurrentPages())
	// 内容高度
	const navHeight = ref(0)
	onBeforeMount(() => {
		const res = uni.getSystemInfoSync();
		sysInfo.value = res
		const menuBtnInfo = uni.getMenuButtonBoundingClientRect();
		menuInfo.value = menuBtnInfo

		// 判断是不是ios系统
		if (sysInfo.value.system.indexOf("ios") > -1) {
			navHeight.value = 96
		} else {
			navHeight.value = 88
		}
		console.log("res", res)
		setStyle()
	})

	const setStyle = () => {
		containerStyle.value = ['background:' + props.background, 'margin-top:' +
			`${sysInfo.value.statusBarHeight}px`,
			'margin-right:' + `${menuInfo.value.width}px`,
			'height:' + `${navHeight.value}rpx`,
			'line-height:' + `${navHeight.value}rpx`,
		].join(";")
		textStyle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(";")
		iconStyle.value = ['width:' + props.iconWidth + 'rpx', 'height:' + props.iconHeight + 'rpx'].join(";")
	}

	const handleBack = () => {
		uni.navigateBack()
	}
</script>

<style lang="scss"
	scoped>
	.nav {
		// background-color: red;
		height: 70rpx;
		display: flex;
		width: 100%;
		align-items: center;
		padding-left: 20rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 2;

		.head-nav {
			display: flex;

			width: 100%;

			&_left {
				display: flex;
				align-items: center;

				.iconfont {
					font-size: 20rpx;
					margin-left: 10rpx;
				}

				.icon-fenleiA {
					font-size: 36rpx;
					margin-right: 16rpx;
				}
			}

			.city {
				font-weight: bold;
			}

			.head-search {
				flex: 1;
				margin-left: 32rpx;
				text-align: center;

				.nav-text,
				.iconfont {
					color: #ccc;
				}

			}
		}

		// position: fixed;
		.nav-left {
			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>